<template>
    <div>
        <el-container>
            <el-header height="100px">{{siteName}}-控制面板</el-header>
            <el-main>
                <el-table stripe
                          v-loading="loading"
                          :data="tableData"
                          style="width: 100%">
                    <el-table-column
                            prop="fileName"
                            label="文件名称"
                            width="200">
                        <template slot-scope="scope">
                            <i class="el-icon-document-checked"></i>
                            <a class="panel-link" target="_blank" :href="'http://127.0.0.1:2019/page/'+scope.row.fileName">{{
                                scope.row.fileName }}</a>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="ctime"
                            label="创建时间"
                            width="300">
                    </el-table-column>
                    <el-table-column
                            prop="mtime"
                            label="最后修改时间"
                            width="300">
                    </el-table-column>
                    <el-table-column
                            label="操作">
                    </el-table-column>
                </el-table>
                <div class="setting-box">
                    <div class="setting-cell">
                        <h3>开发功能及其设置</h3>
                        <div class="setting-row">
                            <el-switch
                                    active-text="自动刷新"
                                    v-model="autoRefresh"
                                    active-color="#13ce66"
                                    inactive-color="#ff4949">
                            </el-switch>
                            <el-tooltip class="tip-icon" effect="dark" content="开启后，浏览器将会跟随文件的修改而刷新" placement="right">
                                <i class="el-icon-question"></i>
                            </el-tooltip>
                        </div>
                        <div class="setting-row">
                            <el-switch
                                    active-text="CSS预渲染"
                                    v-model="scss"
                                    active-color="#13ce66"
                                    inactive-color="#ff4949">
                            </el-switch>
                            <el-tooltip class="tip-icon" effect="dark" content="开启后将识别并渲染SCSS文件" placement="right"><i
                                    class="el-icon-question"></i>
                            </el-tooltip>
                        </div>
                        <div class="setting-row">
                            <el-button type="danger" @click="dist">页面静态化</el-button>
                        </div>
                    </div>
                    <!--<div class="setting-cell">-->
                    <!--<h3>站点信息设置</h3>-->
                    <!--<el-form label-width="80px" :model="form">-->
                    <!--<el-form-item label="站点名称">-->
                    <!--<el-input></el-input>-->
                    <!--</el-form-item>-->
                    <!--<el-form-item>-->
                    <!--<el-button type="primary">修改并保存</el-button>-->
                    <!--</el-form-item>-->
                    <!--</el-form>-->
                    <!--</div>-->
                </div>
            </el-main>
        </el-container>
    </div>
</template>
<style>
    .panel-link {
        color: #808080;
        margin-left: 10px;
    }

    .setting-box {
        text-align: left;
        padding: 20px;
    }

    .setting-box h3 {
        margin-bottom: 10px;
    }

    .setting-box span.tip-span {
        font-size: 14px;
        padding: 0 20px;
        color: #333;
    }

    .setting-cell {
        padding: 20px 0;
        border-bottom: 1px solid #eee;
    }

    .setting-row {
        padding: 15px 10px;
    }

    .setting-cell form {
        width: 400px;
        margin-top: 20px;
    }

    .tip-icon {
        color: #888;
        margin-left: 16px;
        font-size: 16px;
    }
</style>

<script>
    import axios from 'axios';

    export default {
        data() {
            return {
                siteName: '',
                tableData: [],
                loading: true,
                autoRefresh: true,
                scss: false,
                form: {},
                id: ''
            }
        },
        mounted() {
            let that = this;
            this.id = that.$route.params.id;
            axios.get('/siteinfo', {id: this.id}).then((res) => {
                that.afterSend(res);
                let data = res.data;
                data.filesInfo.forEach(function (e) {
                    that.tableData.push(e);
                });
                this.siteName = data.data[0].name;
                this.loading = !res.status;
            })
        },
        methods: {
            afterSend(res) {
                this.$message({
                    message: res.data.msg,
                    type: res.data.status === true ? "success" : "warning"
                });
            },
            dist() {
                window.open('http://127.0.0.1:3000/dist?id='+this.id);
            }
        }
    }
</script>

<style>

</style>

